import React from 'react'
import {GiftedChat} from 'react-native-gifted-chat'
import {Dimensions, StyleSheet, View} from "react-native";
import Icon from 'react-native-vector-icons/Ionicons';
import NavBar, {NavButton, NavTitle} from "react-native-nav";

const {height, width} = Dimensions.get('window')

export default class ChatInfo extends React.Component {
    state = {
        messages: [],
    }

    componentWillMount() {
        this.setState({
            messages: [
                {
                    _id: 1,
                    text: 'Hello developer',
                    createdAt: '2019-01-20',
                    user: {
                        _id: 2,
                        name: 'React Native',
                        avatar: 'https://placeimg.com/140/140/any',
                    },
                },
            ],
        })
    }

    onSend(messages = []) {
        this.setState(previousState => ({
            messages: GiftedChat.append(previousState.messages, messages),
        }))
    }

    render() {
        const {params} = this.props.navigation.state
        return (
            <View style={styles.container}>
                <NavBar style={styles} statusBar={{backgroundColor: 'rgba(0, 0, 0, 0)'}}>
                    <NavButton
                        style={styles.button}
                        onPress={() => {
                            this.props.navigation.goBack()
                        }}
                    >
                        <Icon name="ios-arrow-back" size={30} color="#3396fb"/>
                    </NavButton>

                    <NavTitle style={styles.title}>
                        {params.title}
                    </NavTitle>
                </NavBar>
                <GiftedChat
                    messages={this.state.messages}
                    onSend={messages => this.onSend(messages)}
                    user={{
                        _id: 1,
                    }}
                />
            </View>

        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    statusBar: {
        backgroundColor: '#fff',
    },
    navBar: {
        backgroundColor: '#fff',
        height: height * 0.081939799,
        flexDirection: 'row',
        justifyContent: 'center'

    },
    title: {
        flex: 1,
        textAlign: 'center',
        color: '#3396fb',
    },
    button: {
        backgroundColor: 'transparent',
        marginLeft: 0,
    },
})

